<template>
  <div>
    <el-container>
      <el-header>
        <el-row>
          <el-col class="el-col__first" :span="2">
              <img src="~/static/logo.png" alt="" style="height:40px;margin-top:10px" >
          </el-col>
          <el-col class="el-col__second" :span="3"><div >管理控制台</div></el-col>
          <el-col class="el-col__third" :span="19">
            <div class=" is--left is--bold el-col__third--active" >首页</div>
            <div class="is--right">
              <el-button type="primary" @click="dialogPushVisible=true">我要发布</el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-container >
        <el-main>
          <section>
            <div class="section__title is--bold">任务列表</div>
            <el-table
              :data="list"
              style="width: 100%">
              <el-table-column
                color='#000'>
                 <template slot-scope="scope" >
                    <div class="section__list__task-name is--bold">{{ scope.row.title}}</div>
                    <div class="section__list__task-info">{{ scope.row.info}}</div>
                    <div class="section__list__task-date">{{ scope.row.date}}</div>
                </template>
              </el-table-column>
              <el-table-column
                width="200"
                align="center">
                <template slot-scope="scope">
                  <el-button type="primary" @click="showDialogRecive(scope.row)">我要接收</el-button>
                </template>
              </el-table-column>
            </el-table>
          </section>
           <div class="page">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page.sync="page.pageNum"
              :page-size="page.pageSize"
              layout="total, prev, pager, next"
              :total="page.totalCount">
            </el-pagination>
          </div>
        </el-main>
      </el-container>
      <el-dialog title="发布任务" :visible.sync="dialogPushVisible" @close="clearData('pushForm')">
        <el-form :model="pushForm" :rules="rules" ref="pushForm">
          <el-form-item label="姓名" :label-width="formLabelWidth"  prop="name">
            <el-input v-model="pushForm.name" auto-complete="off" placeholder="请输入您的姓名"></el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth"  prop="tel">
            <el-input v-model.number="pushForm.tel" auto-complete="off" placeholder="请输入您的电话" ></el-input>
          </el-form-item>
          <el-form-item label="任务标题" :label-width="formLabelWidth"  prop="title">
            <el-input v-model="pushForm.title" auto-complete="off" placeholder="请填写任务标题，不超过15个字符"></el-input>
          </el-form-item>
          <el-form-item label="任务详情" :label-width="formLabelWidth" prop="info">
            <el-input type="textarea" v-model="pushForm.info" placeholder="请编写任务内容，不超过500个字符"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogPushVisible = false">取 消</el-button>
          <el-button type="primary" @click="pushSendData('pushForm')">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="接受任务" :visible.sync="dialogReciveVisible" @close="clearData('reciveForm')">
        <el-form :model="reciveForm" :rules="rules" ref="reciveForm">
          <el-form-item label="任务名" :label-width="formLabelWidth">
            <el-input readonly v-model="reciveForm.title"></el-input>
          </el-form-item>
          <el-form-item label="姓名" :label-width="formLabelWidth"  prop="name">
            <el-input v-model="reciveForm.name" auto-complete="off" placeholder="请输入您的姓名"></el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth"  prop="tel">
            <el-input v-model.number="reciveForm.tel" auto-complete="off" placeholder="请输入您的电话" ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogReciveVisible = false">取 消</el-button>
          <el-button type="primary" @click="reciveSendData('reciveForm')">确 定</el-button>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    var validateTel = (rule, value, callback) => {
      if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(value)) {
        callback(new Error('请输入正确的11位手机号码'))
      } else {
        callback()
      }
    }
    return {
      list: [],
      page: {
        pageSize: 20,
        pageNum: 1,
        totalCount: 100
      },
      dialogPushVisible: false,
      dialogReciveVisible: false,
      pushForm: {
        name: '', // 用户名
        tel: '', // 电话
        title: '', // 任务名
        info: ''// 任务详情
      },
      reciveForm: {
        id: '', // 任务id
        name: '', // 用户名
        tel: '', // 电话
        title: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入您的名字', trigger: 'blur' }
        ],
        tel: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          { validator: validateTel, trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入任务名称', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        info: [
          { required: true, message: '请输入任务详情', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 150 个字符', trigger: 'blur' }
        ]
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    handleCurrentChange (e) {
      axios.get('/api/task', { 'pageNum': e }).then(res => {
        if (res.status === 200) {
          this.list = res.data.list
        }
      })
    },
    showDialogRecive (row) {
      this.dialogReciveVisible = true
      this.reciveForm.title = row.title
      this.reciveForm.id = row.id
    },
    pushSendData (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    reciveSendData (formName) {
      console.log(this.reciveForm)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    clearData (el) {
      this.$refs[el].resetFields()
    }

  },
  created () {
    axios.get('/api/task').then(res => {
      if (res.status === 200) {
        this.list = res.data.list
      }
    })
  }
}
</script>

<style lang="less">
.is--left {
 float: left;
}
.is--right {
 float: right;
}
.is--bold {
 font-weight: 800
}
*{
  font-family: '微软雅黑';
  font-size:14px
}
.el-header {
  padding: 0;
  color: #eee;
  .el-row {
    height: 100%;
    .el-col {
      line-height: 60px;
      height:60px;
      &__first {
        text-align: center;
        background: #ea3957;
      }
      &__second {
        background-color:#666;
        text-align: center
      }
      &__third {
        background-color:#666;
        padding: 0 40px;
        &--active {
          font-size:16px
        }
      }
    }
  }
}
.el-main{
  max-width: 1200px;
  margin: 0 auto
}
.section__title{
  font-size: 24px;
  line-height:3em;
  border-bottom:1px solid #000
}
.section__list {
  border-bottom:1px solid #000;
     &__task-name {
       color: #000;
       font-size: 18px;
       line-height:3em
     }
     &__task-info {
       font-size: 14px;
       min-height: 80px;
       overflow: hidden;
     }
     &__task-date {
       text-align: right
     }
}
.page{
  margin-top: 30px;
  text-align:right
}

</style>

